<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>binding</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/login_register.css">
</head>
<body style="background-color: #f3f3f3">
    <div class="topbar-between gradient-color horizontal-view">
        <div class="topbar-back" onclick="location.href='{:U(\'Login/userInfo\')}'"><div class="topbar-back-icon"></div></div>
        <div class="topbar-title">信息绑定</div>
        <div class="topbar-right"></div>
    </div>
    <div class="horizontal-view binding-input-wrap">
        <div class="text-content">手机号码：</div>
        <input id="phone" class="binding-input" type="tel" maxlength="11" placeholder="请输入手机号码"/>
    </div>
    <div class="horizontal-view binding-input-wrap" style="margin-top: 1px">
        <div class="text-content">验证码：</div>
        <input id="secCode" class="input-border-auth" type="text" maxlength="" name="binding_auth" placeholder="请输入短信验证码"/>
        <div class="auth-button" onclick="getCode()">获取验证码</div>
    </div>
    <div class="horizontal-view binding-input-wrap" style="margin-top: 1px">
        <div class="text-content">密码：</div>
        <input class="binding-input" type="password" placeholder="请输入密码"/>
    </div>
    <div class="binding-button gradient-color" onclick="save()">确认</div>
    <input type="hidden" id="isrepeat" value="0"/>
    <input type="hidden" id="sendStatus" value="0"/>
<script src="__JS__/jquery2.1.1.min.js"></script>
<script src="__JS__/layer.min.js"></script>
<script>
//60秒倒计时
var countdown = 120;
function settime(val) {
    if(val==0){
        countdown=0;
        return;
    }
    if (countdown == 0) {
        $('#sendStatus').val(0);
        $('#yanzhenma').text('获取验证码');
        countdown = 120;
        return;
    } else {
        $('#sendStatus').val(1);
        var val = "重新发送(" + countdown + ")";
        $('#yanzhenma').text(val);
        countdown--;
    }
    setTimeout(function() {
        settime(val)
    }, 1000)
}

//获取验证码
function getCode() {
    if ($('#sendStatus').val() == 1) {
        layer.msg('请求过于频繁');
        return;
    }
    var phone = $('#phone').val();
    var telReg = !!phone.match(/^1[3|7|4|5|8]{1}\d{9}$/);
    if (telReg == false) {
        layer.msg('手机格式不正确');
        return;
    }
    settime();
    $.ajax({
        type : "POST",
        url : "/Wx/Login/getCode",
        data : {
            phone : phone,
            type : 3
        },
        dataType : "json",
        success : function(data) {
            try {
                if (data.status == -2) {
                    settime(0);
                    layer.msg('操作过于频繁');
                    return;
                }
            } catch (err) {

            }
        }
    });
}


function save() {
    var url = "/Wx/Login/bindPhoneHandle"
    var phone = $.trim($('#phone').val());
    var code=$.trim($('#secCode').val());
    var telReg = !!phone.match(/^1[3|7|4|5|8]{1}\d{9}$/);
    if (telReg == false) {
        layer.msg('手机格式不正确');
        return;
    }
    if(code==''){
        layer.msg('请输入验证码');
        return;
    }
    $('#isrepeat').val(1);
    $.ajax({
        type : "POST",
        url : url,
        data : {
            phone : phone,
            code:code,
        },
        dataType : "json",
        success : function(data) {
            try {
                if (data.status == 0) {
                    layer.msg('手机绑定成功');
                    setTimeout(function() {
                        location.href = "/Wx/Login/userInfo";
                    }, 2000);
                } else if(data.status==-3) {
                    $('#isrepeat').val(0);
                    layer.msg('验证码不正确');
                    return;
                }else{
                    $('#isrepeat').val(0);
                    layer.msg('手机绑定失败');
                }
            } catch (err) {

            }
        }
    });
}
</script>
</body>
</html>